<template>
	<popup ref="popup" :loading="popupLoading">
		<div slot="body">
			<el-form class="dataForm" ref="form" :disabled="disabled" :model="formParameter" :inline="true" label-width="100px" :rules="rules">
					<el-row>
						<el-col :span="24">
							<el-form-item label="供应商名称" prop="name"><el-input v-model="formParameter.name" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="地区" prop="region">
                <el-cascader
                    :options="regionData"
                    v-model="formParameter.region"
                    :props="{ expandTrigger: 'hover' }"
                    style="width: 100%"
                    placeholder="选择地区"
                ></el-cascader>
              </el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="主要业务" prop="business"><el-input v-model="formParameter.business" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
<!--					<el-row>-->
<!--						<el-col :span="24">-->
<!--							<el-form-item label="客户评级" prop="evaluate"><el-input v-model="formParameter.evaluate" autocomplete="off"></el-input></el-form-item>-->
<!--						</el-col>-->
<!--					</el-row>-->
					<el-row>
						<el-col :span="24">
							<el-form-item label="负责人" prop="chargePerson"><el-input v-model="formParameter.chargePerson" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="联系电话" prop="phoneNumber"><el-input v-model="formParameter.phoneNumber" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注"><el-input v-model="formParameter.remarks" autocomplete="off"></el-input></el-form-item>
            </el-col>
          </el-row>
<!--        <el-row>-->
<!--          <el-col :span="24">-->
<!--            <el-form-item label="test">-->
<!--              <el-cascader-->
<!--                  :options="regionData"-->
<!--                  v-model="formParameter.region"-->
<!--              ></el-cascader>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
			</el-form>
		</div>
		<div slot="footer">
			<el-button v-if="!disabled" type="primary" :loading="confirmLoading" @click="confirm()">确 定</el-button>
			<el-button @click="close">取 消</el-button>
		</div>
	</popup>
</template>

<script>
import popup from '@/components/popup/drawerPopup.vue';
import api from '@/api/supplier/supplier/supplier.js';
import {regionData} from "element-china-area-data";

export default {
	name: 'edit',
	components: {
			popup
		},
	data() {
		return {
			disabled: false,
			popupLoading: false,
			confirmLoading: false,
			parameter: {},
			formParameter: {},
			rules: {
						//供应商名称
						name: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 25,
								trigger: 'blur'
							}
						],
						//地区
						region: [
							{
								validator: this.$validate.required,
								trigger: 'change'
							},
							{
								validator: this.$validate.length,
								max: 255,
								trigger: 'change'
							}
						],
						//主要业务
						business: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 255,
								trigger: 'blur'
							}
						],
						//客户评级
						evaluate: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 1,
								trigger: 'blur'
							}
						],
						//备注
						remarks: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 255,
								trigger: 'blur'
							}
						],
						//负责人
						chargePerson: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 25,
								trigger: 'blur'
							}
						],
						//联系电话
						phoneNumber: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 11,
								trigger: 'blur'
							},
              { pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                message: "请输入正确的手机号码"
              }
						],
			},
      regionData:regionData
		};
	},
	methods: {
			//打开弹框
			open(parameter, title, disabled, size) {
				this.parameter = parameter;
				this.disabled = disabled;
				this.$refs.popup.open(title, size);
				this.$nextTick(() => {
					this.init();
				})
			},
			//关闭弹框
			close() {
				this.disabled = false;
				this.$refs.popup.close();
			},
			//提交表单
			confirm() {
				this.$utils.checkForm(this.$refs.form, () => {
					this.confirmLoading = true;
          this.splicingRegionCode()
					if (!this.parameter.id) {
						//添加
						let parameter = this.$utils.merger(this.formParameter);
						api.save(parameter,
							response => {
								this.$utils.msg.success(response.msg);
								this.confirmLoading = false;
								this.close();
								this.$parent.list();
							},
							response => {
								this.$utils.msg.warning(response.msg);
								this.confirmLoading = false;
							}
						);
					} else {
						//编辑
						let parameter = this.$utils.merger(this.formParameter);
						api.update(parameter,
							response => {
								this.$utils.msg.success(response.msg);
								this.confirmLoading = false;
								this.close();
								this.$parent.list();
							},
							response => {
								this.$utils.msg.warning(response.msg);
								this.confirmLoading = false;
							}
						);
					}
				});

			},
			init() {
				this.popupLoading = true;
				//清除等待
				this.confirmLoading = false;
				//清空内容
				this.formParameter = {};
				//清楚校验
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        })

				if (this.parameter.id) {
					//编辑查询数据
					let parameter = {
						id: this.parameter.id
					};
					api.toUpdate(parameter, response => {
						this.formParameter = response.data;
            this.formParameter.region = this.formParameter.region.split('/')
						this.popupLoading = false;
					});
				} else {
					//添加
					this.popupLoading = false;
				}
			},
      //获取地区数据
      getRegion(){
        regionData.forEach((region,i1)=>{
          if(this.formParameter.region[0]===region.value){
            this.formParameter.region[0] = region.label
            region.children.forEach((rc,i2)=>{
              if(this.formParameter.region[1]===rc.value){
                this.formParameter.region[1] = rc.label
                rc.children.forEach((rcc,i3)=>{
                  if(this.formParameter.region[2]===rcc.value){
                    this.formParameter.region[2] = rcc.label
                  }
                })
              }
            })
          }
        })
      },
      //拼接地区代码
      splicingRegionCode(){
        this.formParameter.region = this.formParameter.region[0] + "/" + this.formParameter.region[1] + "/" + this.formParameter.region[2]
      }

  },
  mounted() {
  }
};
</script>

<style lang="scss" scoped="scoped">
	@import '~common/custom/css/common.scss';
	@import '~common/custom/css/popup/popup.scss';
</style>
